<template>
  <div class="hello">
    <!-- {{this.$store.state.count}} -->
    {{ count }}
    <br />
    <button @click="add">+1</button>
    <br />
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "HelloWorld",
  // computed:{
  //   count(){
  //     return this.$store.state.count
  //   }
  // },
  computed: {
    ...mapState(["count", "todos"]),
    ...mapGetters([
      'doneTodos'
    ])
  },
  methods: {
    add(state) {
      this.$store.commit("edit");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
